<template>
  <el-menu
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      class="nav-bar el-header"
  >
    <el-menu-item index="1" class="nav-item-home" @click="$router.push('/')">首页</el-menu-item>
    <el-menu-item index="2" class="nav-item-article" @click="$router.push('/articles')">文章</el-menu-item>
    <el-menu-item index="3" class="nav-item-videos" @click="$router.push('/videos')">视频</el-menu-item>
    <el-menu-item index="4" class="nav-right-zone-item" v-show="true">登陆/注册</el-menu-item>
    <el-menu-item index="5" class="nav-right-zone-item" v-show="false">用户头像</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "Navigation"
}
</script>

<style scoped>
.nav-right-zone-item {
  position: absolute;
  right: 0
}
</style>